<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>可回收积分换算设置</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
              <Col span="5" class="mr-10">
              <queryData @ProvinceData="childByValue"></queryData>
              </Col>
               <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" 
              show-elevator @on-change="changePage"></Page>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import conversionApi from "@/api/ckRecycling/conversion.js";
  import moment from "moment";
  import {
    Message
  } from "iview";
  import queryData from "@/view/test/cityTestZj.vue"

  export default {
    name: "system",
    components: {
      queryData
    },
    data() {
      return {
        queryForm: {
          cityCascade: {
            data: [{
              id: '',
              name: '请选择'
            }],
            please: '',
            provid: [],
            cityid: [],
            distid: [],
            strt: [],
            commid: [],
            comminid: [],

          },
        },
        // 弹出层数据
        modal: {
          system: {
            isShow: false,
            loading: true,
            type: "create", // create 新建，update 修改
            title: "新建",
            rules: {


            },
            formData: {
              // id: undefined,
              // name: "",
              // url: "",
              // state: ""
            }
          }
        },
        // 列表
        list: {
          loading: false,
          selections: [],
          // 列表展示数据
          tableData: [],
          // 表格表头
          columns: [{
              title: "分类名称",
              key: "garbageTypeName",
              align: "center",
              minWidth: 100
            },
            {
              title: "换算量/单位",
              key: "numerical",
              align: "center",
              minWidth: 100,
              render: (h, params) => {
                let list = params.row.numerical + '/' + params.row.measureunit
                return h('div', list);
              }

            }, {
              title: "换算积分",
              key: "integral",
              align: "center",
              minWidth: 100
            }, {
              title: "是否爱心分类",
              key: "loveflag",
              align: "center",
              minWidth: 100,
              render: (h, params) => {
                let check = false
                if (params.row.loveflag == '0') {
                  check = false
                } else {
                  check = true
                }
                return h('Checkbox', {
                  props: {
                    value: check
                  },
                  on: {
                    'on-change': () => {
                      // console.log("aa")
                      this.newUp(params.row)
                    }
                  }
                })
              }
            },

            // 自动生成结束

            {
              title: "操作",
              align: "center",
              minWidth: 130,
              render: (h, params) => {
                return h("div", {
                  class: "action-group"
                }, [
                  h(
                    'Tooltip', {
                      props: {
                        placement: 'right',
                        content: '删除'
                      },
                      style: {
                        cursor: 'pointer'
                      }
                    },
                    [
                      h(
                        'Button', {
                          props: {
                            type: 'error',
                            size: 'small'
                          },
                          style: {
                            marginRight: '5px',
                            padding: '1px 2px'
                          },
                          on: {
                            click: () => {
                              this.delData(params.row.id)
                            }
                          }
                        },
                        [
                          h('Icon', {
                            props: {
                              type: ' iconfont icon-shanchusekuai',
                              size: 18
                            }
                          })
                        ]
                      )
                    ]
                  )
                ]);
              }
            }
          ]
        },
        // 页面查询数据
        queryData: {
          limit: 10,
          page: 1,
          totalRecord: 0,
          provid: null,
          machineCode: ''


        }
      }
    },
    methods: {
      click() {
        let getCities = this.value;
      },
      // 获取列表
      getTableData() {
        const that = this;
        that.queryData.totalRecord = undefined;
        conversionApi.getPageList(that.queryData)
          .then(res => {
            that.list.tableData = res.data;
            // that.queryData.totalRecord = res.data.length;
            that.queryData.limit = res.data.pageSize;
          })
          .catch(error => {});
      },
      //爱心分类
      newUp(data) {
        let that = this;
        if (data.loveflag == '0') {
          data.loveflag = '1'
        } else if (data.loveflag == '1') {
          data.loveflag = '0'
        }
        conversionApi.update(data).then(res => {
          this.getTableData();
        })
      },
      // 点击保存——新建&修改
      postData() {
        const that = this;
        that.$refs["systemFrom"].validate(valid => {
          if (valid) {
            if (!that.modal.system.formData.id) { // 新建
              conversionApi.add(that.modal.system.formData)
                .then(res => {
                  that.modal.system.isShow = false;
                  that.modal.system.loading = false;
                  if (!res.code) {
                    that.getTableData();
                    that.$Notice.success({
                      title: "保存成功!"
                    });
                  } else {
                    that.$Notice.error({
                      title: res.message
                    });
                  }
                })
                .catch(error => {
                  Message.error(error);
                });
            } else { // 修改
              conversionApi.update(
                  that.modal.system.formData.id,
                  that.modal.system.formData
                )
                .then(res => {
                  that.modal.system.isShow = false;
                  that.modal.system.loading = false;
                  if (!res.code) {
                    that.getTableData();
                    that.$Notice.success({
                      title: "保存成功!"
                    });
                  } else {
                    that.$Notice.error({
                      title: res.message
                    });
                  }
                })
                .catch(error => {
                  Message.error(error);
                });
            }
          } else {
            that.modal.system.loading = false;
            that.$nextTick(() => {
              that.modal.system.loading = true;
            });
          }
        });
      },

      // 删除
      delData(data) {
        this.$Modal.confirm({
          title: "确认删除",
          content: "<p>是否删除?</p><p>删除后将无法撤销，请谨慎操作！</p>",
          loading: true,
          onOk: () => {
            conversionApi.del(data).then(res => {
              this.$Modal.remove();
              if (!res.code) {
                this.$Notice.success({
                  title: "删除成功"
                });
                this.queryData.page = 1;
                this.getTableData();
              } else {
                this.$Notice.error({
                  title: res.message
                });
              }
            });
          }
        });
      },
      //城市级联
      childByValue(newObject) {
        this.queryData.provid = newObject.provid;
        this.queryData.commid = newObject.commid;
        this.queryData.cityid = newObject.cityid;
        this.queryData.comminid = newObject.comminid;
        this.queryData.distid = newObject.distid;
        this.queryData.strt = newObject.strt;
      },
      errorWorring() {
        this.$Message.error('功能尚未开发');
      },
      //查询
      inQuire() {
        const that = this;
				that.queryData.page=1;
        // conversionApi.getPageList(that.queryData);
        this.getTableData();
      },


      //每页显示记录数变更
      onPageSizeChange(pageSize) {
        this.queryData.limit = pageSize;
        this.getTableData();
      },

      // 换页
      changePage(page) {
        this.queryData.page = page;
        this.getTableData();
      },

      // 显示新建弹窗
      showCreateModal() {
        // this.modal.system.type = "create";
        // this.modal.system.title = "新建";
        // this.modal.system.formData = {};
        // this.modal.system.isShow = true;
        this.$Message.error('功能暂不可用');

      },

      // 显示修改弹窗
      showUpdateModal(id) {
        this.modal.system.type = "update";
        this.modal.system.title = "修改";
        //不请求后端，直接list取对象
        // this.modal.system.formData = JSON.parse(
        //   JSON.stringify(this.list.tableData)
        // )[index];
        // this.modal.system.isShow = true;
        const that = this;
        conversionApi.getDetail(id).then(res => {
            that.modal.system.formData = res.data;
            that.modal.system.isShow = true;
          })
          .catch(error => {
            Message.error(error);
          });

      }
    },

    created() {
      this.getTableData();
    }
  };
</script>
